首页
<template>
    <div class="main">
        <el-card class="box-card">
         <div class="infinite-list" v-infinite-scroll="load">
         <el-form ref="form" :model="user_info" label-width="80px">
                      <el-row> 
                        <el-col :span="3">用户名</el-col>
                        <el-col :span="1">:</el-col>
                        <el-col :span="6">
                            <el-input v-model="user_info.username"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">密码</el-col>
                        <el-col :span="1">:</el-col>
                        <el-col :span="6">
                          <el-input v-model="user_info.password"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">权限</el-col>
                        <el-col :span="1">:</el-col>
                        <el-col :span="6">
                            <el-select v-model="user_info.type">
                          <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">确认密码</el-col>
                        <el-col :span="1">:</el-col>
                        <el-col :span="6">
                            <el-input v-model="user_info.password2"></el-input>
                        </el-col>
                      </el-row>
<div class="but">
  <el-form-item>   
    <el-button type="primary" @click="onSubmit">确认添加</el-button>
    <el-button>取消</el-button>
  </el-form-item>
      </div>
</el-form>

         </div>
        </el-card>
</div>
</template>

<script>
import axios from '../plugins/axios'  //在哪里用就在哪里引入
export default {
    data(){
        return{

            user_info:{
                "username":"",
                "password":"",
                "type":"",
                "password2":"",
            },
             options: [{
                    id: 0,
                    label: "用户"
                },
                {
                    id: 1,
                    label: "管理员"
                }
            ],
        }
    },
    methods: {

      load () {
        this.count = 2;
      },
       onSubmit() {
        this.user_info.oper='5'
        axios.post('action/users_db_oper',this.user_info)
        .then(response=>{
            console.log(response);
            this.$message({
                          message: '添加成功',
                          type: 'success'
                     });
             this.user_info={
                "username":"",
                "password":"",
                "type":"",
                "password2":"",
            }
        })
        .catch(error=>{
           console.log(error);
           this.$message.error('网络错误，请联系管理员！');
        })
      },

    },
     created:function(){
        // axios.pot('action/user_db_oper')
        // .then(response=>{
        //    // console.log(response);
        //     this.user_info=response.data;
        //     //console.log(this.system_info);
        // })
        // .catch(error=>{
        //    console.log(error);
        //    alert('网络错误');
        // })
},
}
</script>

<style scoped>
.el-card{
    position: relative;
    top:20px;
    height: 450px;
    width: 80%;
}
.but{
  position: absolute;
  top:80%;
  left:67%;
}
.el-select{
  width: 229px;
}
</style>
